<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>My JSP 'report.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<link rel="stylesheet" type="text/css" href="css/report.css">
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
			});
		</script>
		<script type="text/javascript">
			$(function () {
			    var chart;
			    $(document).ready(function() {
			        chart = new Highcharts.Chart({
			            chart: {
			                renderTo: 'container',
			                type: 'line'
			            },
			            title: {
			                text: '收入支出线程表'
			            },
			            subtitle: {
			                text: null
			            },
			            credits: {
			            	enabled:false
				        },
			            lang: {
			            	downloadPNG: '导出PNG图片',
			            	downloadJPEG: '导出JPGE图片',
			            	downloadPDF: '导出PDF',
			            	downloadSVG: '导出SVG',
			            	printButtonTitle: '打印',
			            	exportButtonTitle: '导出'
				        },
			            xAxis: {
			                categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
			                labels: {
			                    align: 'center',
			                    style: {
			                        fontSize: '13px',
			                        paddingTop : '6px',
			                        fontFamily: 'Verdana, sans-serif'
			                    }
			                }
			            },
			            yAxis: {
			                title: {
			                    text: null
			                }
			            },
			            tooltip: {
			                formatter: function() {
			                        return '<b>'+ this.series.name +'</b><br/>'+
			                        this.x +': '+ this.y +'元';
			                }
			            },
			            legend: {
			                align: 'center',
			                verticalAlign: 'bottom'
			            },
			            series: [{
			                name: '收入',
			                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 0]
			            }, {
			                name: '支出',
			                data: [0, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 0]
			            }]
			        });
			    });
			    
			});
		</script>
	</head>

	<body style="background-image: url('img/bg.jpg');">
		<center>
			<jsp:include page="tiles-components/top.jsp"></jsp:include>
			<div style="background: url('img/conbg.gif') repeat-y;width: 998px;">
				<div style="height: 40px;width: 100%;"></div>
				<center>
					<table style="width: 980px;"> 
						<tr>
							<td>
								<div style="width: 100%;height: 38px;position: relative;">
									<a class="report3" href="javascript:void(0)">收支统计</a>
									<a class="report4" href="javascript:void(0)">年度报表</a>
									<a class="showList" href="javascript:void(0)">列表</a>
									<a class="showIMG" href="javascript:void(0)">图形</a>
								</div>
								<div style="width: 100%;height: 41px;background: url('img/titbg.jpg') repeat-x 0px -97px;"><%-- --%>
									<table width="100%" height="41px">
										<tr>
											<td width="15px">
												&nbsp;
											</td>
											<td width="120px">
												<table width="100%" height="29px">
													<tr>
														<td>
															<div style="width: 100%;height: 29px;position: relative;">
																<a class="add" href="javascript:void(0)"></a>
																<a class="reduction" href="javascript:void(0)"></a>
																<input class="dateInput" value="2013" type="text" />
															</div>
														</td>
													</tr>
												</table>
											</td>
											<td style="text-align: right;padding-right: 10px;">
												<span class="reportYearText1">年收入：</span><font class="reportYearText2">0</font>
												<span class="reportYearText1">年支出：</span><font style="color: #469c00" class="reportYearText2">3428</font>
												<span class="reportYearText1">年结余：</span><font class="reportYearText2">-3428</font>
											</td>
										</tr>
									</table>
								</div>
								<table class="Table2" style="display: none;">
									<tr>
										<th style="width: auto;">收入</th>
										<th>一月</th>
										<th>二月</th>
										<th>三月</th>
										<th>四月</th>
										<th>五月</th>
										<th>六月</th>
										<th>七月</th>
										<th>八月</th>
										<th>九月</th>
										<th>十月</th>
										<th>十一月</th>
										<th>十二月</th>
										<th>全年</th>
									</tr>
									<tr>
										<td style="font-weight: normal;color: #0033cc;font-size: 12px;">合计</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
										<td>0</td>
									</tr>
									<tr>
										<th style="width: auto;">支出</th>
										<th>一月</th>
										<th>二月</th>
										<th>三月</th>
										<th>四月</th>
										<th>五月</th>
										<th>六月</th>
										<th>七月</th>
										<th>八月</th>
										<th>九月</th>
										<th>十月</th>
										<th>十一月</th>
										<th>十二月</th>
										<th>全年</th>
									</tr>
									<tr>
										<td style="color: #555;font-weight: normal;font-size: 12px;">水果零食</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
										<td style="color: #555;font-weight: normal;font-size: 12px;">0</td>
									</tr>
									<tr>
										<td style="font-weight: normal;color: #0033cc;font-size: 12px;border-top: #ddd 1px solid">合计</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
										<td style="border-top: #ddd 1px solid">0</td>
									</tr>
								</table>
								<script src="js/highcharts.js"></script>
								<script src="js/exporting.js"></script>
								<div id="container" style="max-width: 980px; height: 400px; margin: 0px;display: block;"></div>
							</td>
						</tr>
					</table>
				</center>
				<div style="height: 20px;width: 100%;"></div>
			</div>
			<div><img src="img/con_bottom.gif" /></div>
			<jsp:include page="tiles-components/footer.jsp"></jsp:include>
		</center>
	</body>
</html>
